<template>
  <div class="company-model">
    <!--选择地址-->
    <van-popup
        v-model="addressShow"
        position="bottom"
        :style="{ height: '100%' }">
      <div class="title_text_span">
        <span>*</span> 完善本人信息将有助于更快完成认证
      </div>
      <div v-if="manualShowt"  class="search_input_body">
        <input type="text" v-model="company" placeholder="请输入单位名称">
      </div>
      <div v-if="!manualShowt"  class="search_input_body">
        <input type="text" v-model="companySearch" placeholder="请输入单位名称关键字">
        <button @click="onSearch"><van-icon name="search"/></button>
      </div>
      <div class="error_text">
        所选企业会与你的真实信息进行校验，关于补贴的领取，请准确、慎重选择
      </div>
      <div v-if="manualShowt" class="is_no_company">
        <div class="address_list">
          <div class="no_a_comany">返回<a href="javascript:;" @click="manualShowt = false">在线搜索 >></a></div>
        </div>
      </div>
      <div v-if="!manualShowt" class="is_yes_company">
        <h5 v-if="showTitle" class="h5_tx">搜索到以下单位名称：</h5>
        <div v-if="showTitle" class="address_list">
          <van-cell v-for="(item, index) in companyList" :key="item.creditCode" :value="item.companyName" :class="bgACtive === index ? 'bg_active':''"  @click="activeItem(item.companyName,index)" />
          <div class="no_a_comany">搜索不到？<a href="javascript:;" @click="manualShowt = true;">手动输入 >></a></div>
        </div>
      </div>
      <div class="footer_btn">
        <a href="javascript:;" @click="addressShow = false">关闭</a>
        <a href="javascript:;" @click="setAdressData">确定</a>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'company-model',
  components: {},
  data () {
    return {
      addressShow: false,
      manualShowt: false,
      showTitle: false,
      companySearch: '',
      bgACtive: -1,
      company: '',
      companyList: []
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/8/9 0009 11:01
     *@function  选择企业
     *****************************************/
    activeItem (name, index) {
      this.company = name
      this.bgACtive = index
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/9 0009 9:16
     *@function  弹出选择框
     *****************************************/
    init () {
      this.addressShow = true
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/9 0009 9:49
     *@function  返回所选地区数据
     *****************************************/
    setAdressData () {
      this.addressShow = false
      this.$emit('refreshDataList', this.company)
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/18 0018 15:01
     *@function  搜索企业
     *****************************************/
    onSearch () {
      this.$jsonp(`http://www.workeredu.com/index.php?c=apis&m=getCompany&company=${this.companySearch}`).then(json => {
        this.showTitle = true
        if (json.status === 0) {
          this.companyList = null
          return
        }
        this.companyList = json.data
      }).catch(err => {
        console.log(err)
      })
    }
  },
  computed: {},
  created () {
  },
  mounted () {
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .company-model {
    .h5_tx{
      font-size: 26px;
      color: #222222;
      padding: 0 25px;
      margin: 0;
    }
    .address_list{
      height: calc(100% - 400px);
      overflow: auto;
      padding-bottom: 250px;
      .no_a_comany{
        font-size: 28px;
        color: #222222;
        line-height: 50px;
        padding: 20px 30px;
        a{
          color: #027FFE;
        }
      }
      .bg_active{
        background: #027FFE;
        color: #ffffff;
        span{
          color: #ffffff;
        }
      }
    }
    .error_text{
      padding: 0 32px 32px;
      font-size: 26px;
      color: #FF0000;
      line-height: 37px;
    }
    .title_text_span{
      padding: 20px 30px;
      display: flex;
      align-items: center;
      font-size: 26px;
      line-height: 35px;
      color: #c8c9cc;
      margin-top: 20px;
      margin-bottom: 40px;
      background-image: linear-gradient(-270deg, #FBFBFB 0%, #F6F6F6 100%);
      span{
        color: #FA3A51;
      }
    }
    .footer_btn{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 110px;
      background-color: #ffffff;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      padding: 12px 45px;
      display: flex;
      justify-items: center;
      justify-content: center;
      align-content: center;
      align-items: center;
      a{
        background: #FA3A51;
        border-radius: 4px;
        height: 86px;
        margin: 0 15px;
        font-size: 32px;
        color: #FFFFFF;
        letter-spacing: 0;
        width: 100%;
        line-height: 86px;
        text-align: center;
        &:nth-child(1){
          background: #FFFFFF;
          border: 1px solid #C8C8C8;
          font-size: 32px;
          color: #666666;
        }
      }
    }
    .search_input_body{
      margin: 40px 32px;
      background: #FFFFFF;
      border: 1px solid #DDDDDD;
      border-radius: 45px;
      display: flex;
      justify-content: space-between;
      padding-left: 35px;
      height: 90px;
      align-items: center;
      align-content: center;
      input{
        font-size: 28px;
        color: #222222;
        height: 52px;
        width: 100%;
        border: 0;
        margin-right: 35px;
      }
      button{
        background: #FA3A51;
        border: 0;
        color: #ffffff;
        height: 90px;
        width: 142px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom-right-radius: 45px;
        border-top-right-radius: 45px;
        i{
          font-size: 55px;
        }
      }
    }
  }
</style>
